<script setup>
import { weatherInfo } from "@/constants/mock.js";
</script>

<template>
  <view>
    <div class="weather-container">
      <div class="info">
        <span>{{ weatherInfo.location }}</span>
        <span>{{ weatherInfo.temperature }} ℃</span>
        <span>{{ weatherInfo.weather }}</span>
		<image class="icon" src="@/static/icon/sunny.png"></image>
      </div>
      
    </div>
  </view>
</template>

<style scoped>
.weather-container {
  display: flex;
  align-items: center;
}

.info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.icon {
  width: 50px;
  height: 50px;
}
</style>
